import { Avatar } from 'antd';
import IsDisabled from './IsDisabled';
import styles from './index.less';

interface columnsProps {
  handleChangeChecked: (record: any) => void;
  handleEdit: (record: any) => void;
}

const columns = ({ handleChangeChecked, handleEdit }: columnsProps) => {
  return [
    {
      title: '头像',
      dataIndex: 'avatar_url',
      width: 100,
      align: 'center',
      render: (_text: any, record: any) => <Avatar src={record.avatar_url} />,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      width: 150,
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      align: 'center',
      width: 300,
    },
    {
      title: '是否禁用',
      dataIndex: 'is_locked',
      align: 'center',
      width: 150,
      render: (_text: any, record: any) => (
        <IsDisabled
          isChecked={record.is_locked}
          handleChecked={() => handleChangeChecked(record.id)}
        />
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'created_at',
      width: 200,
    },
    {
      title: '操作',
      dataIndex: 'action',
      align: 'center',
      render: (_text: any, record: any) => (
        <span onClick={() => handleEdit(record)} className={styles.editSpan}>
          编辑
        </span>
      ),
    },
  ];
};

export default columns;
